<template>
  <div class="PowerSurveymiddle">
    <!-- 发电功率 -->
    <div class="middlelittle">
      <div class="title">发电功率</div>
      <div class="fadian" ref="fadiangonglv"></div>
    </div>
    <!-- 发电量 -->
    <div class="middlelittle">
      <div class="tittlels">
        <div class="title">发电量</div>
        <div>
          <el-radio-group v-model="radio4" size="mini" @change="getelequshi">
              <el-radio-button label="2">月</el-radio-button>
              <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="fadian" ref="fadianliang"></div>
    </div>
  </div>
</template>

<script>
import { timeArray } from '@/utils/array'
import {getdianzhangonglvapi,getdianzhandianliang} from '@/api/Photovoltaic/SystemHeught/PhotovoSurvey'
import * as echarts from 'echarts';
export default {
  name: 'CallPoliceMiddle',
  props: ['companyId'],
  data() {
    return {
      radio4:'2'
    };
  },

  mounted() {
    
  },

  methods: {
    getecharts() {
      this.getgonglv()
      this.getelequshi(this.radio4)
    },
    // 获取发电功率
    async getgonglv() {
      var chartDom = this.$refs.fadiangonglv
      var myChart = echarts.init(chartDom);
      var option;
      // const loading = this.$loading({
      //   lock: true,
      //   text: 'loading',
      //   spinner: 'el-icon-loading',
      //   target: chartDom
      // });
      const { data: { list } } = await getdianzhangonglvapi({ classId: this.companyId })
      const timePoints = timeArray
      const colorlist=['#1a90fe','#f2d649']

      const jinshishi =list.find(ele=>ele.name=='实时用量')
      const jinshishilist=jinshishi.datalist.map(ele => ele.valueReading)
      let jinshishinum = this.gettotaltime(jinshishi.datalist[0]?.timeReading)
      for (let i = 0; i < jinshishinum; i++){
        jinshishilist.unshift(' ')
      }

      const zuoshishi = list.find(ele => ele.name == '昨日用量')
      const zuorishilist = zuoshishi.datalist.map(ele => ele.valueReading)
      let conct= this.gettotaltime(zuoshishi.datalist[0]?.timeReading)
      for (let i = 0; i < conct; i++){
        zuorishilist.unshift(' ')
      }

      const jinfuhe = list.find(ele => ele.name == '实时负荷')
      const jinsrifuhelist = jinfuhe.datalist.map(ele => ele.valueReading)
      let jinfuhenum=this.gettotaltime(jinfuhe.datalist[0]?.timeReading)
      for (let i = 0; i < jinfuhenum; i++){
        jinsrifuhelist.unshift(null)
      }

      const zuofuhe = list.find(ele => ele.name == '昨日负荷')
      const zuorifuhelist = zuofuhe.datalist.map(ele => ele.valueReading)
      let zuofuhetol = this.gettotaltime(zuofuhe.datalist[0]?.timeReading)
      for (let i = 0; i < zuofuhetol; i++){
        zuorifuhelist.unshift(null)
      }
      option = {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,
          confine:true,
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '1%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: timePoints,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '(kWh)',
            axisLine: {
            show: true,
            },
          },
          {
            type: 'value',
            name: '(kW)',
            axisLine: {
            show: true,
            },
          },
        ],
        series: [
        {
              name: '今日发电量',
              type: 'bar',
              data: jinshishilist
          },
          {
            name: '实时功率',
              type: 'line',
              smooth: true,
              showSymbol: false,
              symbol: 'none',
              symbolSize: 0,
              yAxisIndex: 1,
              data: jinsrifuhelist
          },
          {
            name: '昨日发电量',
              type: 'bar',
            data: zuorishilist
          },
          {
              name: '昨日功率',
              type: 'line',
              smooth: true,
              showSymbol: false,
              symbol: 'none',
              symbolSize: 0,
              yAxisIndex: 1,
              data: zuorifuhelist
          },
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      // loading.close()
    },
    // 获取发电量
    async getelequshi(val) {
      var chartDom = this.$refs.fadianliang
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const { data: { entity } } = await getdianzhandianliang({ classId: this.companyId, dateType: val })
      // console.log(list);datalist
      option = {
        color:['#5087ec'],
        xAxis: {
          type: 'category',
          data: entity.datalist.map(ele=>ele.timeReading)
        },
        grid: {
                left: '2%',
                right: '1%',
                bottom: '1%',
                top: '7%',
                containLabel: true
              },
        tooltip: {
          trigger: 'axis',
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name:entity.name,
            data: entity.datalist.map(ele=>ele.valueReading),
            type: 'bar'
          }
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    gettotaltime(fixedTimeString) {
      var fixedTime = new Date(fixedTimeString);
      // 获取当天00:00:00的时间戳
      var todayTimestamp = new Date(fixedTime.getFullYear(), fixedTime.getMonth(), fixedTime.getDate()).getTime();

      // 计算固定时间距离当天00:00:00的毫秒数
      var fixedTimestamp = fixedTime.getTime() - todayTimestamp;

      // 计算固定时间之前的时间段数量
      var totalSegmentsBeforeFixed = Math.floor(fixedTimestamp / (15 * 60 * 1000))
      return totalSegmentsBeforeFixed
    },
  },
};
</script>

<style scoped>
.PowerSurveymiddle{
  height: 100%;
  display: flex;
  justify-content: space-between;
  .middlelittle{
    width: calc(50% - 5px);
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    .title{
      font-weight: bold;
    }
    .fadian{
      height: 90%;
    }
    .tittlels{
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>